* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body, #root {
  width: max-content !important;
  height: max-content !important;
  min-width: 100% !important;
  min-height: 100% !important;
  font-size: 16px;
}

$navBgColor: #f2fb2b;
$headerBgColor: #f29044;
$mainImgColor: #3170d9;
$contentColor-2: #f5f5f5;

@mixin WH($bgColor, $height:auto, $bg: 0) {
  width: 80%;
  height: $height;
  margin: $bg auto;
  background: $bgColor;
}

header {
  @include WH($headerBgColor, 100px);
  border: 1px solid red;
  display: flex;
  justify-content: space-between;
  align-items: center; // 盒子垂直居中

  @media screen and (max-width: 700px) {
    width: 502px;
    margin: 0 100px;
  }

  & .logo {
    width: 205px;
    height: 51px;
    background-color: #36b559;
  }

  & .login {
    width: 297px;
    height: 52px;
    background-color: #3754b3;
  }
}

nav {
  height: 45px;
  background-color: #2f2f2f;

  & ul {
    @include WH($navBgColor, 100%)
  }
}

main {
  & .imgBox {
    height: 31vw;
    background-color: $mainImgColor;
  }

  & .content_1 {
    @include WH(white);
    display: flex;
    justify-content: space-between;
    padding-bottom: 3vh;

    & > div {
      height: 17vw;

      &:nth-child(1) {
        width: 35%;
        background-color: #9791d6;
        margin-right: 1.5vw;
      }

      &:nth-child(2) {
        width: calc(100% - 35% - 1.5vw);
        display: flex;

        & > div {
          height: 100%;

          &:nth-child(1) {
            width: calc(100% - 40% - 1px);
            background-color: #f5f5f5;
            margin-right: 1px;
          }

          &:nth-child(2) {
            width: 40%;
            background-color: #d692c0;
          }
        }
      }
    }
  }

  & .content_2 {
    background-color: $contentColor-2;
    display: flex;
    padding: 4vh;

    & > div {
      @include WH(white, 19vw);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 4vh;

      & div:nth-child(1) {
        width: 35%;
        height: 100%;
        background: #d691c0;
        margin-right: 3vw;
      }

      & div:nth-child(2) {
        width: calc(100% - 35% - 3vw);
        height: 100%;
        background: #d691c0;
      }

    }

  }

  & .content_3 {
    padding-bottom: 3vw;

    & .cont_3_top {
      @include WH(#f4e20c, 8vw, 1vw);
      display: flex;
      justify-content: space-between;
      align-items: flex-end;

      & div:nth-child(1) {
        width: 20%;
        height: 90%;
        background: #0d66f4;
      }

      & div:nth-child(2) {
        width: 30%;
        height: 90%;
        background: #0d66f4;
      }
    }

    & .cont_3_bottom {
      @include WH(transparent, 24vw);
      display: flex;
      justify-content: space-between;

      & div {
        width: calc((100% - 1vw * 3) / 4);
        height: 100%;
        background: #eff4f5;
      }
    }
  }
}

footer {
  height: 10vw;
  background: #2f2f2f;
}